<template>
  <div class="dashboard-container">
    <div id="app">
      <!-- 面包屑区域 -->
      <el-card class="box-card">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a href="/">一级菜单</a></el-breadcrumb-item>
          <el-breadcrumb-item>二级菜单</el-breadcrumb-item>
          <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>

      <el-card class="box-card">
        <el-tabs v-model="activeName">
          <!-- 图文形式开始 -->
          <el-tab-pane label="图文形式" name="first">
            <!-- 插入图形模式组件 -->
            <graphic-form />
          </el-tab-pane>
          <!-- 图文形式结束 -->

          <!-- 表格模式开始 -->
          <el-tab-pane label="表格模式" name="second">
            <tabular-form />
          </el-tab-pane>
          <!-- 表格模式结束 -->

        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入图文形式组件
import GraphicForm from './components/graphicform';
import TabularForm from './components/tabularform';

export default {
  name: 'Dashboard',
  components: {
    GraphicForm,
    TabularForm,
  },
  data() {
    return {
      activeName: 'first',
      input1: '', // 图文搜索框
      tableData: '', // 数据
    };
  },
  created() {
    // this.getShoplist();
    // this.getShoplist2(1000);
  },
  methods: {
    // 渲染列表
    // async getShoplist() {
    //   const data = await getShoplist(this.page);
    //   console.log(data);
    //   this.pages = data.headers['x-total-count'];
    //   this.tableData = data.data;
    //   console.log(this.tableData);
    // },
    // async getShoplist2(id) {
    //   const { data } = await getShoplist2(id);
    //   // console.log(data);
    //   this.tableData2 = data[0];
    //   this.tableData2.firstdiscounts = (this.tableData2.firstdiscounts !== '否');
    //   console.log(this.tableData2);
    // },
    // 分页跳转
    // changePage(newPage) {
    //   this.page.page = newPage;
    //   this.getShoplist();
    // },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header{
  padding: 0;
  border: #8d8d8d solid 1px;
}

::v-deep .el-drawer__body{
  overflow: auto;
}

.dashboard-container{
  min-width: 1200px;
}
.el-button{
  transform: translate(5px,0px);
}
.gjss{
  color: #339DFF;
}
.leimu{
  height: 50px;
  .ssleimu{
    float: left;
    height:50px;
    line-height:50px;
  }
  .qbleimu {
    list-style-type:none;
    float: left;
    li{
      float: left;
      width: 75px;
      height: 15px;
    }
  }
  .sqleimu{
    color: #339DFF;
        height:50px;
    line-height:50px;
  }
}
.leirong{
  width: 265px;
  width: 265px;
  height: 280px;
  padding: 0px;
  margin: 10px;
  .image{
    width: 100%;
    height: 160px;
  }
  .xinxi{
    .bt{
      font-size: 18px;
    }
    .nr{
      margin: 2px;

    }
    .xix {
      font-size: 14px;
      color: #929292;
    }
    .danj{
      font-size: 12px;
      color: #D8D8D8;
    }
  }
}
.spmsrk{
  width: 200px;
}
.ssk1,.ssk2{
  margin-bottom: 20px;
}

</style>
